import { Popover } from "antd";
import style from "./index.module.scss";
import { MouseEventHandler } from "react";

interface CategoryBarProps {
  content: React.ReactNode;
  data: string[];
  className?: string;
  onClick?: MouseEventHandler<HTMLDivElement>;
}
export default function CategoryBar(props: CategoryBarProps) {
  const { data, content, className, onClick } = props;
  return (
    <div className={style["categoryBar"]}>
      <div className={`${className}`}>
        <div className={style["courseType"]}>
          {data.map((item: any, index: number) =>
            item === "更多" ? (
              <Popover placement="right" content={content} key={index}>
                <div className={style["item"]}>{item}</div>
              </Popover>
            ) : (
              <div className={style["item"]} onClick={onClick} key={index}>
                {item}
              </div>
            )
          )}
        </div>
      </div>
    </div>
  );
}
